<template>
  <div class="account-summary-container">
    <!-- 简化的标题区域 -->
    <div class="page-header">
      <div class="header-left">
        <i class="el-icon-wallet header-icon"></i>
        <div class="title-info">
          <h1 class="page-title">账户资金管理</h1>
          <p class="page-subtitle">集中管理您的投资账户和资金配置</p>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="operation-buttons">
      <el-button type="default" @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </el-button>
      <el-button type="primary" @click="showAddDialog">
        <i class="el-icon-plus"></i> 新增账户
      </el-button>
    </div>
    
    <!-- 数据表格 -->
    <el-card>
      <div slot="header">
        <span><i class="el-icon-tickets"></i> 账户汇总列表</span>
      </div>
      <el-table 
        :data="tableData" 
        style="width: 100%" 
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="totalInvestment" label="总投资"></el-table-column>
        <el-table-column prop="desc" label="资金说明"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间"></el-table-column>
        <el-table-column prop="updatedTime" label="更新时间"></el-table-column>
        <el-table-column label="操作" width="250">
          <template v-slot="scope">
            <el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    
    <!-- 编辑对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="40%">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="ID" v-if="editForm.id">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="总投资">
          <el-input v-model="editForm.totalInvestment" placeholder="请输入总投资"></el-input>
        </el-form-item>
        <el-form-item label="资金说明">
          <el-input v-model="editForm.desc" placeholder="请输入资金说明"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listAccountSummary, addOrUpdateAccountSummary, delAccountSummary } from '@/api/account'
export default {
  name: 'AccountSummary',
  data() {
    return {
      // 表格数据
      tableData: [],
      // 选中的行
      selectedRows: [],
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      // 对话框相关
      // 对话框相关
      dialogVisible: false,  // 修改这里，确保默认为 false
      dialogTitle: '',
      // 编辑表单
      editForm: {
        id: null,
        totalInvestment: '',
        desc: ''
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    // 加载数据
    loadData() {
      this.loading = true
      // 调用后端接口获取数据
      listAccountSummary({
        page: this.currentPage,
        size: this.pageSize
      }).then(response => {
        if (response.code === 200) {
          this.tableData = response.rows
          this.total = response.total
        } else {
          console.error('获取数据失败:', response.msg)
          this.$message.error('获取数据失败: ' + response.msg)
        }
        this.loading = false
      }).catch(error => {
        console.error('获取数据时发生错误:', error)
        this.$message.error('获取数据时发生错误')
        this.loading = false
      })
    },
    
    // 处理选中变化
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.loadData()
    },
    
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadData()
    },
    
    // 显示添加对话框
    // 显示添加对话框
    showAddDialog() {
      console.log('showAddDialog method called')
      this.dialogTitle = '新增账户汇总'
      this.editForm = {
        id: null,
        totalInvestment: '',
        desc: ''
      }
      console.log('Setting dialogVisible to true')
      this.dialogVisible = true
      console.log('dialogVisible value:', this.dialogVisible)
      // 添加一个延时检查
      setTimeout(() => {
        console.log('dialogVisible after timeout:', this.dialogVisible)
      }, 100)
    },
    
    // 显示编辑对话框
    showEditDialog(row) {
      this.dialogTitle = '编辑账户汇总'
      this.editForm = {
        ...row
      }
      this.dialogVisible = true
    },
    
    // 保存数据
    save() {
      console.log('保存数据:', this.editForm)
      // 根据是否有ID判断是新增还是编辑
      if (this.editForm.id) {
        // 编辑
        addOrUpdateAccountSummary(this.editForm).then(response => {
          if (response.code === 200) {
            this.$message.success('编辑成功')
            this.dialogVisible = false
            this.loadData()
          } else {
            this.$message.error('编辑失败: ' + response.msg)
          }
        }).catch(error => {
          console.error('编辑时发生错误:', error)
          this.$message.error('编辑时发生错误')
        })
      } else {
        // 新增
        addOrUpdateAccountSummary(this.editForm).then(response => {
          if (response.code === 200) {
            this.$message.success('新增成功')
            this.dialogVisible = false
            this.loadData()
          } else {
            this.$message.error('新增失败: ' + response.msg)
          }
        }).catch(error => {
          console.error('新增时发生错误:', error)
          this.$message.error('新增时发生错误')
        })
      }
    },
    
    // 删除行
    deleteRow(row) {
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除记录:', row.id)
        // 这里应该调用后端接口删除数据
        delAccountSummary(row.id).then(response=>{
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.dialogVisible = false
            this.loadData()
          } else {
            this.$message.error('删除时发生错误')
          }
        }).catch(error => {
          console.error('删除时发生错误:', error)
          this.$message.error('删除时发生错误')
        });
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 批量删除
    batchDelete() {
      this.$confirm('确定要批量删除选中的记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedRows.map(item => item.id)
        console.log('批量删除记录:', ids)
        // 这里应该调用后端接口批量删除数据
        this.$message.success('批量删除成功')
        this.loadData()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
/* 重新设计的标题区域样式 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.header-icon {
  font-size: 48px;
  margin-right: 20px;
  color: rgba(255, 255, 255, 0.9);
}

.title-info {
  flex: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: white;
}

.page-subtitle {
  font-size: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.header-stats {
  margin-top: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 24px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.operation-buttons {
  margin-bottom: 20px;
}
</style>